<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>考试记录</title>
  <link rel="stylesheet" href="/static/web/css/style.css" + Date.now() >
  <script src="/static/component/jquery_3.3.1.js"></script>
  <style>
    /* 添加分页按钮样式 */
    .pagination button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 8px 16px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 14px;
      margin: 4px 2px;
      cursor: pointer;
      border-radius: 4px;
    }
    
    .pagination button:disabled {
      background-color: #cccccc;
      cursor: not-allowed;
    }
  </style>
</head>
<body class="container">
  <h2>📈 我的考试记录</h2>
  <table class="record-table">
    <thead><tr><th style="background-color: gray;">考试名称</th><th style="background-color: gray;">得分</th><th style="background-color: gray;">日期</th></tr></thead>
    <tbody></tbody>
  </table>
  <div class="pagination" id="pagination">
    <button id="prev-page">上一页</button>
    <span id="page-info"></span>
    <button id="next-page">下一页</button>
  </div>
  <script src="/static/web/js/layout.js?v=" + Date.now() ></script>
  <script src="/static/web/js/checklogin.js?v=" + Date.now() ></script>
  <script>
    $(function () {
      let currentPage = 1;
      const pageSize = 10;
      
      // 从接口获取考试记录数据
      function loadRecords(page) {
        $.ajax({
          url: "/web.Exam/getExamRecordList",
          method: "POST",
          data: {
            page: page,
            page_size: pageSize
          },
          dataType: "json",
          success: function (response) {
            if (response.code === 0 && response.data && Array.isArray(response.data.data)) {
              $("tbody").empty();
              console.log("[INFO] 考试记录数据:", response.data);
              response.data.data.forEach(r => {
                $("tbody").append(`<tr>
<td style="text-align:center">${r.exam_name}</td>
<td style="text-align:center">${r.score}</td>
<td style="text-align:center">${r.create_time}</td>
</tr>`);
              });
              
              // 更新分页信息
              currentPage = page;
              $("#page-info").text(`第 ${response.data.current_page} 页，共 ${response.data.last_page} 页`);
              
              // 控制按钮状态
              if (response.data.current_page <= 1) {
                $("#prev-page").prop("disabled", true);
              } else {
                $("#prev-page").prop("disabled", false);
              }
              
              if (response.data.current_page >= response.data.last_page) {
                $("#next-page").prop("disabled", true);
              } else {
                $("#next-page").prop("disabled", false);
              }
            } else {
              console.error("[ERROR] 接口返回数据格式不正确:", response);
            }
          },
          error: function (xhr, status, error) {
            alert("无法加载考试记录，请稍后重试！");
          }
        });
      }
      
      // 初始化加载第一页
      loadRecords(1);
      
      // 上一页按钮点击事件
      $("#prev-page").click(function() {
        if (currentPage > 1) {
          loadRecords(currentPage - 1);
        }
      });
      
      // 下一页按钮点击事件
      $("#next-page").click(function() {
        loadRecords(currentPage + 1);
      });
    });
  </script>
</body>
</html>